<template>
  <!-- 人流趋势 -->
  <div class="stream-trend chart-box1">
    <div class="chart-title">
      <a-row type="flex" align="middle" justify="space-between">
        <a-col>大厦人流趋势</a-col>
        <a-col>
          <small-tab
            :tabList="timeTabList"
            :activeKey="curTimeTab"
            @change="handleTabChange"
          />
        </a-col>
      </a-row>
    </div>
    <div class="chart-content" :id="chartId"></div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
  nextTick,
  toRaw,
  watch,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import SmallTab from "../common/SmallTab.vue";
import store from "../../../../store";

export default defineComponent({
  name: "StreamTrend",
  components: { SmallTab },
  setup(props) {
    const state = reactive({
      timeTabList: [
        { key: "hour", title: "近12小时" },
        { key: "day", title: "近7天" },
      ],
      curTimeTab: "day",
      chartId: "streamTrendChart",
      chart: null,
      data: {
        hour: [],
        day: [],
      },
    });

    const handleTabChange = (e) => {
      const { key } = e;
      if (key == state.curTimeTab) {
        return;
      }
      state.curTimeTab = key;
      state.chart.changeData(toRaw(state.data[key]));
    };

    const initChart = () => {
      const data = state.data[state.curTimeTab];
      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
        padding: [20, 20, 20, 40],
      });

      state.chart.data(data);
      state.chart.scale({
        time: {
          range: [0, 1],
        },
        value: {
          min: 0,
          nice: true,
          alias: "峰值",
        },
      });

      state.chart.axis("value", {});

      state.chart
        .line()
        .position("time*value")
        .label("value", {
          style: {
            fill: "#fff",
          },
        })
        .color("#38b05c");
      state.chart.point().position("time*value");

      state.chart.render();
    };

    watch(
      () => store.getters.flow.PeopleStreamTrend,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { PeopleStreamTrend } = store.getters.flow;
      if (PeopleStreamTrend) {
        state.data.hour = PeopleStreamTrend.half_day;
        state.data.day = PeopleStreamTrend.seven_day;
      }
      if (state.chart) {
        state.chart.changeData(toRaw(state.data[state.curTimeTab]));
      } else {
        nextTick(() => {
          initChart();
        });
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });
    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
      handleTabChange,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.stream-trend {
  .time-item {
    font-weight: normal;
    cursor: pointer;
    padding-left: 1rem;
  }
  .time-active {
    color: #38b05c;
    font-weight: bold;
    font-size: 1.6rem;
  }
}
</style>
